<template>
  <div class="picker" >
    <PickerCanvas  :color="color" @change="changeFromCanvas"></PickerCanvas>
    <div class="slider-box">
      <div class="copy-color">
        <div style="width: 100%;height: 100%;background-color: black;" :style="{backgroundColor: target}"></div>
      </div>
      <div class="slider-outer">
        <PickerSlider class="slider" :max="360" :min="0" v-model="color.h" start-on="right" @change="changeFromHue" >
          <div class="hue-bar"></div>
        </PickerSlider>
        <PickerSlider class="alpha slider" :max="1" :min="0" v-model="color.a"  @change="changeFromAlpha" :step="0.01" >
          <div style="width: 100%;height: 100%" :style="alphaStyle"></div>
        </PickerSlider>

      </div>
    </div>
    <div class="format">
      <div class="inputs" >
        <div class="hex" v-show="format=='hex'">
          <input type="text" :value="target" @input="changeHex" @change="changeHex">
          <div class="format-txt">HEX</div>
        </div>
        <div class="rgba" v-show="format=='rgba'">
          <div style="width: 25%">
            <input type="number" v-model.number="color.r" @change="changeFromRGB">
            <div class="format-txt">R</div>
          </div>
          <div style="width: 25%">
            <input type="number" v-model.number="color.g" @change="changeFromRGB">
            <div class="format-txt">G</div>
          </div>
          <div style="width: 25%">
            <input type="number" v-model.number="color.b" @change="changeFromRGB">
            <div class="format-txt" >B</div>
          </div>
          <div style="width: 25%">
            <input type="number" v-model.number="color.a" @change="changeFromAlpha">
            <div class="format-txt" >A</div>
          </div>
        </div>
        <div class="hsla" v-show="format=='hsla'">
          <div style="width: 25%">
            <input type="number" v-model.number="color.h" @change="changeFromHue">
            <div class="format-txt">H</div>
          </div>
          <div style="width: 25%">
            <input type="number" v-model.number="color.s" @change="changeFromHSL">
            <div class="format-txt">S</div>
          </div>
          <div style="width: 25%">
            <input type="number" v-model.number="color.l"  @change="changeFromHSL">
            <div class="format-txt" >L</div>
          </div>
          <div style="width: 25%">
            <input type="number" v-model.number="color.a"  @change="changeFromAlpha">
            <div class="format-txt" >A</div>
          </div>
        </div>

      </div>
      <div class="switch">
        <svg width="20" height="22" xmlns="http://www.w3.org/2000/svg" @click="inputsSwitch">
          <polygon points="7,8 13,8 10,4" style="fill:#000;"/>
          <polygon points="7,13 13,13 10,17" style="fill:#000;"/>
        </svg>
      </div>
    </div>
    <div class="palettes">
      <div class="colors">
        <Material v-if="material" @change="changeFromMaterial"></Material>
        <div v-else class="rgb-slider-box">
          <PickerSlider v-model="color.r" start-on="right" @change="changeFromRGB" :max="255" :min="0" style="margin-top: 10px" >
            <div class="slider-bg" :style="sliderRStyle"></div>
          </PickerSlider>
          <PickerSlider v-model="color.g" start-on="right" @change="changeFromRGB" :max="255" :min="0" >
            <div class="slider-bg" :style="sliderGStyle"></div>
          </PickerSlider>
          <PickerSlider v-model="color.b" start-on="right" @change="changeFromRGB" :max="255" :min="0" >
            <div class="slider-bg" :style="sliderBStyle"></div>
          </PickerSlider>
        </div>
      </div>
      <div class="switch" >
        <svg width="20" height="22" xmlns="http://www.w3.org/2000/svg" @click="paletteSwitch">
          <polygon points="7,8 13,8 10,4" style="fill:#000;"/>
          <polygon points="7,13 13,13 10,17" style="fill:#000;"/>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
import {Color, HUES} from '../color'
import PickerSlider from "./PickerSlider";
import PickerCanvas from "./PickerCanvas";
import Material from "./Material";
export default {
  name: "ColorPicker",
  components:{PickerSlider,PickerCanvas,Material},
  props: {
    value: {type: String, default: "#FF0000"}
  },
  mounted() {
    //禁用右键菜单
    this.$el.oncontextmenu=(ev)=>{
      console.log(ev);
      return ev.target instanceof HTMLInputElement
      //return false
    };
	},
  data() {
    return {
      format: "hex",
      target: this.value,
      color: new Color(this.value),
      ctx2d: null,
      cPointX: 0, cPointY: 0,
      hue:0,
      cWidth: 0,
      cHeight: 0,
      material:true,

    }
  },
  methods: {

    changeHex(ev){
      let val=ev.target.value
      if(/^#([0-9A-F]{3}|[0-9A-F]{6})$/i.test(val)){
        this.target=val;
        this.color.fromHex(val)
        this.$emit("input",val)
      }
    },
    changeFromCanvas(r,g,b){
      //console.log(util.toJSON(arguments));
      let hsl=Color.rgb2hsl(r,g,b);
      Object.assign(this.color,{r,g,b,h:this.color.h,s:hsl[1],l:hsl[2]});
      this.target=this.color.toHex();
    },
    changeFromHue(val){
      this.color.fromHSL();
      this.target=this.color.toHex();
    },
    changeFromAlpha(val){
      this.target=this.color.toHex();
    },
    changeFromMaterial(val){
      this.color.fromHex(val)
      //console.log(this.color)
      this.target=val;
    },
    paletteSwitch(){
      this.material=!this.material;
    },
    changeFromRGB(){
      this.color.fromRGB()
      this.target=this.color.toHex();
    },
    changeFromHSL(){
      this.color.fromHSL();
      this.target=this.color.toHex();
    },
    inputsSwitch() {
      switch (this.format) {
        case "hex":
          this.format = "rgba";
          break;
        case "rgba":
          this.format = "hsla";
          break;
        case "hsla":
          this.format = 'hex'
      }
    }
  },
	computed:{
    cPointStyle(){
			return {right:this.cPointX-6+'px',
        top:this.cPointY-6+'px'}
		},
    alphaStyle(){
      return {background: `linear-gradient(to left, rgba(${this.color.r},${this.color.g},${this.color.b},1), rgba(${this.color.r},${this.color.g},${this.color.b},0))`}
    },
    sliderRStyle(){
      return {background: `linear-gradient(to left, rgb(${0},${this.color.g},${this.color.b}), rgb(${255},${this.color.g},${this.color.b}))`}
    },
    sliderGStyle(){
      return {background: `linear-gradient(to left, rgb(${this.color.r},${0},${this.color.b}), rgb(${this.color.r},${255},${this.color.b}))`}
    },
    sliderBStyle(){
      return {background: `linear-gradient(to left, rgb(${this.color.r},${this.color.g},${0}), rgb(${this.color.r},${this.color.g},${255}))`}
    }
	},
  watch: {
    value(n, o) {
      //this.target = n;
      console.log(n)
    }
  }

}
</script>

<style scoped>
.picker {
  width: 230px;
  /* height: 320px; */
  box-sizing: border-box;
  box-shadow: 1px 1px 3px 1px #ccc;
  border-radius: 3px;
  overflow: hidden;
  user-select: none;
}

.picker * {
  box-sizing: border-box;

}

.slider-box {
  display: flex;
  margin-top: 15px;
}

.copy-color {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  margin: 0px 0px 0 15px;
  box-shadow: 0 0 2px black;
  overflow: hidden;
  will-change: transfom;
  background-position: 0 0, -4px 4px, 0 4px, -4px 0;
  background-size: 8px 8px;
  background-image: linear-gradient(45deg, rgba(112, 128, 144, .5) 25%, transparent 0), linear-gradient(45deg, transparent 75%, rgba(112, 128, 144, .5) 0), linear-gradient(-45deg, rgba(112, 128, 144, .5) 25%, transparent 0), linear-gradient(-45deg, transparent 75%, rgba(112, 128, 144, .5) 0);
}

.slider-outer {
  border: springgreen;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 181px;
}
.slider{
  margin: 0px 15px;
}
.hue-bar {
  height: 100%;
  background-color: steelblue;
  background-image: linear-gradient(90deg, rgb(255, 0, 0), rgb(255, 0, 255), rgb(0, 0, 255), rgb(0, 255, 255), rgb(0, 255, 0), rgb(255, 255, 0), rgb(255, 0, 0));
}

.alpha.slider {
  will-change: transfom;
  background-position: 0 0, -4px 4px, 0 4px, -4px 0;
  background-size: 8px 8px;
  background-image: linear-gradient(45deg, rgba(112, 128, 144, .5) 25%, transparent 0), linear-gradient(45deg, transparent 75%, rgba(112, 128, 144, .5) 0), linear-gradient(-45deg, rgba(112, 128, 144, .5) 25%, transparent 0), linear-gradient(-45deg, transparent 75%, rgba(112, 128, 144, .5) 0);
}


.format {
  display: flex;
  margin-top: 15px;
  width: 100%;
  /* flex-direction: column; */
  justify-content: space-between;
}

.format > .inputs {
  margin-left: 15px;
  display: block;
  flex-basis: auto;
  width: 178px;
}

.format > .inputs input {
  outline: none;
  border: 1px solid #ccc;
  text-align: center;
  width: 100%;
  display: block;
  padding: 4px;
}

.format > .inputs input:focus {
  border: 1px solid rgb(26, 115, 232);
}

.format-txt {
  color: #aaa;
  padding: 5px;
  font-size: 12px;

}
.inputs input{
  font-family: Terminal,Consolas;
}

.switch {
  width: 20px;
  margin: 0 10px 0 7px;
  display: flex;
}

.switch > svg {
  margin: auto 0px;
  border-radius: 2px;
}

.switch > svg:hover {
  background-color: #ccc;
}

.palettes {
  padding: 5px 0 5px 5px;
  display: flex;
  border-top: 1px solid #ccc;
}

.palettes > .switch {
  display: block;
  padding-top: 4px;
  margin-left: 0px;
}

.palettes::after {
  content: " ";
  clear: both;
  display: block;
}

.colors {
  width: 195px;
}

.slider-bg{
 height: 100%;
}
.rgb-slider-box{
  padding: 0 10px 5px 10px;
}
.rgb-slider-box>.slider-box{
  margin-top:12px;
}
.rgba>div,.hsla>div{
  width: 25%;
  float: left;
}
.inputs>.rgba>div>input,.inputs>.hsla>div>input{
  display: block;
  width: 90%;
  margin: 0 auto;
  padding: 4px 0;
}
.inputs input::-webkit-outer-spin-button,
.inputs input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.inputs input[type="number"]{
  -moz-appearance: textfield;
}


</style>
